<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/sub.css" />
		<link rel="stylesheet" type="text/css" href="css/discover.css" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>

	<body>
		<!-- 头部 -->
		<header class="mui-bar mui-bar-nav detail">
	       <a class="mui-action-back mui-pull-left icon-left"></a>
	       <h1 class="detail-tit mui-ellipsis mui-pull-left">四大金刚</h1>
	       <a href="" class="mui-pull-right icon-serve" style="font-size: .64rem;"></a>
	   </header>
		<div class="mui-content">
			<!--主题内容-->

			<!--S二级导航-->
			<div id="sort-title" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<div class="mui-scroll sub-nav">
					<a class="mui-control-item mui-active" data-index="0">
						婚礼司仪
					</a>
					<a class="mui-control-item" data-index="1">
						婚礼化妆
					</a>
					<a class="mui-control-item" data-index="2">
						婚礼摄影
					</a>
					<a class="mui-control-item" data-index="3">
						婚礼摄影
					</a>
				</div>
			</div>
			<!--E二级导航-->

			<!--S筛选框-->
			<div id="selectWrap">
	   			<div class="select close">
					<div class="select-wrap mui-clearfix">
						<div class="select-header mod-title-24">
							婚礼经验：
						</div>
						<div class="select-content">
							<ul>
								<li class="active">10场以下 </li>
								<li>10-50场以下 </li>
								<li>50-200场以下 </li>
								<li>200场以上 </li>
							</ul>
						</div>
					</div>
					<div class="select-wrap mui-clearfix">
						<div class="select-header mod-title-24">
							价格区间：
						</div>
						<div class="select-content">
							<ul>
								<li class="active">1000以下 </li>
								<li>1000-2000 </li>
								<li>2000-5000 </li>
								<li>5000以上</li>
								<li>5000以上</li>
							</ul>
						</div>
					</div>
					<div class="select-wrap mui-clearfix">
						<div class="select-header mod-title-24">
							性别：
						</div>
						<div class="select-content ">
							<ul>
								<li class="active">男 </li>
								<li>女 </li>
							</ul>
						</div>
					</div>
					<div class="select-btn">
						<button class="clear-btn" >清除</button>
						<button class="confirm-btn" onclick="toggleOpen()">确认</button>
					</div>
	   			</div>
			</div>
			<!--E筛选框-->
			<div class="p-cover close">
			</div>
			<!--E筛选框-->
			<div id="content-wrap">

			</div>

		</div>
		<!--脚部-->
		<nav class="mui-bar mui-bar-tab condition">
			 <button class="sort-btn">排序</button>
			 <button class="screen-btn active">筛选</button>
		</nav>
		<!--S筛选框-->
		<script type="text/html" id="selectJs">
			<div class="select">
				<div class="select-wrap mui-clearfix">
					<div class="select-header mui-pull-left mod-title-24">
						婚礼经验：
					</div>
					<div class="select-content mui-pull-left">
						<ul>
							<li class="active">10场以下 </li>
							<li>10-50场以下 </li>
							<li>50-200场以下 </li>
							<li>200场以上 </li>
						</ul>
					</div>
				</div>
				<div class="select-wrap mui-clearfix">
					<div class="select-header mui-pull-left mod-title-24">
						价格区间：
					</div>
					<div class="select-content mui-pull-left">
						<ul>
							<li class="active">10场以下 </li>
							<li>10-50场以下 </li>
							<li>50-200场以下 </li>
							<li>200场以上 </li>
						</ul>
					</div>
				</div>
				<div class="select-wrap mui-clearfix">
					<div class="select-header mui-pull-left mod-title-24">
						性别：
					</div>
					<div class="select-content mui-pull-left">
						<ul>
							<li class="active">男 </li>
							<li>女 </li>
						</ul>
					</div>
				</div>
			</div>
			<div class="select-btn">
				
			</div>
		</script>
		<!--S筛选框-->
		
		<!--S四大金刚页面列表5-->
		<script type="text/html" id="sdjgJs">
			<div class="item-list">
				{{each arr as item index}}
				<div class="hotel-item mui-clearfix">
					<div class="hotel-item-header mui-pull-left">
						<img src="http://placehold.it/261x261" />
					</div>
					<div class="hotel-item-body mui-pull-left">
						<h2 class="mod-title-30 mui-ellipsis">踪沁</h2>
						<p class="mod-price mui-ellipsis">&yen;1/天</p>
						<p class="mod-info-24 mui-ellipsis">女</p>
						<h2 class="mod-title-24 mui-ellipsis"><i class="icon-locat mr6"></i>泰国人妖地区</h2>
						<a href="detail.html?headstyle=wedshopheader&drawmod=3*6*7&btntxt=" class="mod-nav">查看详情 ></a>
					</div>
				</div>
				{{/each}}
			</div>
		</script>
		<!--E四大金刚页面列表5-->
		
		<script src="js/artTemplate.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mod.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui(".screen-btn")[0].addEventListener("tap",function(){
				toggleOpen();
				
			})
			
			function addEvent(){
				mui(".select-content").on("tap","ul li",function(){
					if(this.parentElement.querySelector(".active")!=null)
					{
					this.parentElement.querySelector(".active").className="";
					}
					this.className="active";
				})
				
				mui(".clear-btn")[0].addEventListener("tap",function(){
					mui(".select-content .active").each(function(index,item){
						item.className=""
					})
				});
			}
			addEvent();
			function toggleOpen() {
				var selectBtn=mui(".select")[0];
				var pcoverBtn=mui(".p-cover")[0];
				selectBtn.className = selectBtn.className.indexOf(" close")>-1?"select open":"select close";
				pcoverBtn.className = pcoverBtn.className.indexOf(" close")>-1?"p-cover open":"p-cover close";
			}
			
			//clearSelect();
		</script>

	</body>

</html>